<template>
  <div class="Sidebarl">
    <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点我打开</el-button>
    <el-drawer title="我是标题" v-model="drawer" :size="300" :with-header="false">
      <span>我来啦!</span>
    </el-drawer>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "sidebarl",
  data: () => {
    return { drawer: false };
  },
  setup() {
    // setup函数，是在beforecreate钩子之前完成的.无法使用data,methods
    // setup的this指向unfefined
    // 只能是同步的
    let { count, myFun, state, delList } = fun();

    return { count, myFun, state, delList };
    // 组合api，需要return出去
  }
};
function fun() {
  // let count = 0;
  // ref只能监听简单数据类型的变化
  // 在template中使用使用时不用加value
  let count = ref(0);

  function myFun() {
    console.log(count.value);
    count.value += 1;
  }

  //reactive参数必须是对象(json/arr)
  // 1. 传递其他对象界面可能不更新
  // 1.1默认情况下修改对象属性 ，界面不会自动更新
  // 1.2想更新，需要重新赋值对象
  let state = reactive({
    list: [
      { id: 1, name: 5 },
      { id: 2, name: 5 },
      { id: 3, name: 5 }
    ]
  });
  function delList(index) {
    state.list = state.list.filter((list, idx) => idx !== index);
  }
  return { count, myFun, state, delList };
}
</script>

<style lang='scss' scoped>
.sidebarl {
  width: 200px;
  height: 100%;
  background: green;
}
.move {
  width: 0;
}
</style>